<template>
    <a-table :columns="columns" :data-source="Fromdata">
        <a slot="name" slot-scope="text">{{ text }}</a>

        <span slot="tags" slot-scope="tags">
            <a-tag v-for="tag in tags" :key="tag"
                :color="tag === '审核中' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'">
                {{ tag.toUpperCase() }}
            </a-tag>
        </span>
        <span slot="action" slot-scope="text,record">
            <a>审核</a>
            <a-divider type="vertical" />
            <a>编辑</a>
            <a-divider type="vertical" />
            <a @click="showDeleteConfirm(record)">
                删除
            </a>
        </span>
        <zonelist></zonelist>
    </a-table>

</template>
<script>
import zonelist from "@/components/zonelist.vue"
const columns = [
    {
        dataIndex: 'serial',
        key: 'serial',
        title: '序号',
    },
    {
        dataIndex: 'name',
        key: 'name',
        title: '姓名',
    },
    {
        title: '类型',
        dataIndex: 'type',
        key: 'type',
    },
    {
        title: '状态',
        key: 'tags',
        dataIndex: 'tags',
        scopedSlots: { customRender: 'tags' },
    },
    {
        title: '证件号码',
        dataIndex: 'certificate',
        key: 'certificate',
    },
    {
        title: '手机号码',
        dataIndex: 'phone',
        key: 'phone',
    },
    {
        title: '房间',
        dataIndex: 'Room',
        key: 'Room',
    },
    {
        title: '操作',
        key: 'action',
        scopedSlots: { customRender: 'action' },
    },
];

export default {
    name: 'TaberWorkbench',

    data() {
        return {

            columns,
        };
    },
    components: {
        zonelist
    },
    props: ['Fromdata'],

    mounted() {

    },

    methods: {
        showDeleteConfirm(record) {
            // console.log(record)//当前列的数据
            this.$confirm(
                {
                    title: '删除确认',
                    content: '确定删除此信息吗？',
                    okText: '确认',
                    okType: 'danger',
                    cancelText: '取消',
                    icon: "",
                    onOk: () => {

                        //点击删除时进行过滤数据
                        let staging = this.Fromdata.filter(item => {
                            return !(item.key == record.key)
                        })

                        this.Fromdata = staging
                        console.log(this.Fromdata)
                    },
                    onCancel() {
                        console.log('Cancel');
                    },
                });
        },
    },
};
</script>

<style lang="less" scoped>
/deep/.ant-divider {
    color: transparent;
    background-color: transparent;
}

/deep/.ant-table-row {
    >td:nth-child(2) {
        width: 97px;
    }
}
</style>